{{extend name="layouts/main" /}}

{{block name="title"}}<title>分类列表 | 微信小程序后台管理系统</title>{{/block}}

{{block name="css"}}
<style>

</style>
{{/block}}
{{block name="content"}}
<section class="content-header">
    <h1>管理系统</h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 分类管理</a></li>
        <li class="active">分类列表</li>
    </ol>
</section>
<section class="content" id="showcontent">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">添加分类</h3>
                </div>
                <form role="form" action="{{:url('category/create')}}" method="post" enctype="multipart/form-data">
                    <div class="box-body">

                        <div class="form-group">
                            <label for="input_name" class="control-label">分类名字</label>
                            <input type="text" name="name" class="form-control  " id="input_name" placeholder="请输入名字！">
                        </div>
                        <div class="form-group">
                            <label for="img" class="control-label"></label>
                            <input id="img" name="img" type="file" class="form-control"
                                   accept="image/gif,image/jpg,image/png"
                                   multiple style="display: none;">
                            <span class="input-group-btn">
                                <button id="btn_path" type="button" class="btn btn-white" style="display: inline-block">点击上传图片</button>
                            </span>
                            <input type="text" name="imgurl" id="info_path" value="" class="form-control input-sm">
<!--                            <span id="img-list-box" style="margin-left: 25px;"></span>-->
                        </div>

                        <div class="form-group" style="margin-bottom: 15px !important;">
                            <label class="">父级分类</label>
                            <select class="form-control" name="parent_id">
                                <option value="0" selected>顶级分类</option>
                                {{if condition="empty($categories)"}}
                                {{else /}}
                                {{volist name="categories" id="category"}}
                                    <option value="{{$category.id}}">{{$category.name}}</option>
                                        {{if condition="isset($category['child'])"}}
                                            {{volist name="category['child']" id="v"}}
                                                <option value="{{$v.id}}">|----{{$v.name}}</option>
                                            {{/volist}}
                                        {{/if}}
                                {{/volist}}
                                {{/if}}
                            </select>
                        </div>
                    </div>
                    <div class="box-footer">
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
{{/block}}
{{block name="js"}}
<script>
    $(function () {
        $('#btn_path').click(function () {
            $('#img').click();
        })

        function delete_image(self) {
            console.log(self);
        }

        $('body').delegate('#img', 'change', function (self) {
            console.log(self.currentTarget.value);
            if(!image_check(self.currentTarget.value)){
                return false;
            }
            var my_data = new FormData();
            console.log(self.currentTarget.files[0]);
            my_data.append("img", self.currentTarget.files[0]);
            $.ajax({
                url: '{{:url("admin/Base/upload_img")}}', //接口
                type: 'post',
                data: my_data,
                cache: false,
                processData: false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
                contentType: false, // 不设置Content-type请求头
                dataType: "json",
                success: function (data) {
                    var html = '<div style="position: relative;margin-right: 20px;margin-bottom: 15px;width: 132px;display: inline-block;border: 1px solid #CCC;background:#EEE;">'
                        +'<span style="display: block;width: 120px;height: 80px;border: 1px solid #F2F1F0;margin: 5px;overflow: hidden;">'
                        +'<img src="'+data+'" style="width: 100%;" />'
                        +'</span>'
                        +'<input type="hidden" name="imgs[]" value="'+data+'" />'
                        +'<a onclick="delete_image(e);" style="z-index: 10;display: block;top: -8px;cursor:pointer;right: -8px;position:absolute;width: 20px;height: 20px;background: #CCC;border-radius:100%;text-align:center;line-height: 20px;border: 1px solid #C1C1C1;color: #555;">X</a>'
                        +'</div>';

                    console.log(data);
                    // $('#img-list-box').append(html);
                    $('#info_path').val(data);
                    // $('#info_path').focus()
                },
                error: function (e) {
                    console.error(e);
                },
            });
        })
        


        function image_check(value) { //自己添加的文件后缀名的验证
            return /.(jpg|png|gif|bmp|jpeg)$/.test(value) ? true : (function () {
                window.alert('图片格式仅支持jpg、png、gif、bmp、jpeg格式，且区分大小写。');
                return false;
            })();
        }

        $("#m-3").addClass('active');
    })
</script>
{{/block}}
